<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css3基础</title>
    <style>
        @media(min-width: 476px) {
            .col-sm {width: 80%;}
        }
        @media(min-width: 576px) {
            .col-sm {width: 60%;}
        }
        @media(min-width: 768px) {
            .col-sm {width: 40%;}
        }
        div {
            border: 2px solid cadetblue;
        }
    </style>
</head>

<body>
    <div class="col-sm">注意div宽度随窗口大小变化</div>
</body>

</html>